<template>
	<view class="bizPage">
		<status-bar title="员工档案" />
		<view class="padding20">
			<view class="picker bgwhite d-flex a-center m-bot20" @click="showPicker = true">
				<view class="size28">部门：</view>
				<view class="flex-1 size28 color-666">{{ deptName || '请选择' }}</view>
				<text class="iconfont icon-a-zujian32 size24 color-999"></text>
			</view>
			<view class="search bgwhite d-flex a-center m-bot20">
				<text class="iconfont icon-sousuo color-333 m-right20"></text>
				<input class="flex-1 size26" v-model="name" placeholder="请输入员工姓名" confirm-type="search" @blur="handleSearch" />
			</view>
			<view class="list bgwhite">
				<view class="item d-flex a-center" @click="toUrl('/bizPage/personnel/fileDetails?employeeId=' + item.employeeId)" v-for="(item,index) in list" :key="index">
					<image class="avatar m-right20" :src="item.avatar ? imgUrls(item.avatar) : staticImg + 'noExist.jpg'" mode="aspectFill"></image>
					<view class="flex-1 size28 color-222">{{ item.name }}</view>
					<text class="iconfont icon-a-zujian32 size24 color-999"></text>
				</view>
			</view>
			
			<up-empty :show="noData" mode="list" marginTop="100"></up-empty>
		</view>
		
		<up-picker :show="showPicker" :columns="deptList" keyName="deptName" @cancel="showPicker = false" @confirm="confirmPicker"></up-picker>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { staticImg } from '@/utils/config.js'
	import { toUrl, Toast, imgUrls } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	
	const list = ref([])
	const name = ref('')
	const department = ref('')
	const page = ref(1)
	const limit = ref(10)
	const noData = ref(false)
	const noMore = ref(false)
	
	onLoad((e) => {
		if(e.name) name.value = e.name
		getList()
		getDepts()
	})
	
	const getList = () => {
		noData.value = false
		noMore.value = false
		Http.post({
			url: '/hr/Employee/list',
			data: {
				name: name.value,
				department: department.value,
				pageNum: page.value,
				pageSize: limit.value
			},
			Typejson: false
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			let result = res.rows || []
			list.value = page.value == 1 ? result : list.value.concat(result)
			if(!list.value.length) noData.value = true
			if(result.length < limit.value) noMore.value = true
		})
	}
	
	const deptList = ref([[]])
	const showPicker = ref(false)
	const deptName = ref('')
	
	const getDepts = () => {
		Http.get({
			url: '/hr/getDeptList'
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			deptList.value[0] = res.data || []
		})
	}
	
	const confirmPicker = (e) => {
		let item = e.value[0]
		department.value = item.deptId
		deptName.value = item.deptName
		page.value = 1
		getList()
		showPicker.value = false
	}
	
	const handleSearch = () => {
		page.value = 1
		getList()
	}
	
	onReachBottom(() => {
		if(noMore.value) return
		page.value ++
		getList()
	})
</script>

<style lang="scss" scoped>
	.bizPage {
		min-height: 100vh;
		background: #F9F9F9;
	}
	.picker {
		height: 100rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;
	}
	.search {
		height: 66rpx;
		box-shadow: 0rpx 3rpx 4rpx 0rpx rgba(58,100,132,0.11); 
		border-radius: 33rpx;
		padding: 0 20rpx;
	}
	.list {
		border-radius: 20rpx;
		padding: 0 20rpx;
		.item {
			height: 132rpx;
			padding: 0 14rpx;
			&:not(:last-child) {
				border-bottom: 1rpx solid #F2F2F2;
			}
			.avatar {
				width: 66rpx;
				height: 66rpx;
				border-radius: 10rpx;
			}	
		}
	}
</style>
